import React from "react";
import { List } from "antd";
import Link from "next/link";
import PropTypes from "prop-types";
// import fontawesome from '@fortawesome/fontawesome'
// import { faCoffee } from '@fortawesome/fortawesome-free-solid';
import BlogListItem from "./component/blogListItem";
import "./center_content.scss";

const Content = (props) => {
  return (
    <div className="center_content">
      {/* <FontAwesomeIcon icon={faCoffee}></FontAwesomeIcon> */}
      <List
        grid={{
          gutter: 16,
          xs: 1,
          sm: 2,
          xl: 6,
          xxl: 3,
        }}
        dataSource={props.mylistData}
        renderItem={(item) => (
          <List.Item>
            <Link href={`/centerContent/contentItem?Id=${item.id}`}>
              <a>
                {/* <Card title={item.title}>Card content</Card> */}
                <BlogListItem blogItem={item} className="listItem" />
              </a>
            </Link>
          </List.Item>
        )}
      />
      ,
    </div>
  );
};
Content.propTypes = {
  mylistData: PropTypes.array.isRequired,
};
export default Content;
